@import '@views/live/cc/assets/styles/mixin.scss';

.chat {
  @include width-height-full();
  .chat-header {
    height: 35px;
    background: rgba(241, 241, 241, 1);
    box-shadow: 0px -1px 0px 0px rgba(232, 232, 232, 1), 0px 1px 0px 0px rgba(232, 232, 232, 1);
    box-sizing: border-box;
    padding: 0 10px;
    .chat-title-icon {
      @include width-height-same(22px);
      background-image: url(~@views/live/cc/assets/images/icon-playbar.png);
      background-repeat: no-repeat;
      background-position: -12px -271px;
      float: left;
      margin-right: 10px;
      margin-top: 7px;
    }
    .chat-title {
      float: left;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 35px;
    }
  }
  .chat-body {
    @include layout(35px, 0, 0, 0);
    overflow-y: auto;
    .chat-message-wrap {
      width: 100%;
      overflow: hidden;
      padding: 20px 15px;
      box-sizing: border-box;
      .chat-content-wrap {
        width: 100%;
        position: relative;
        float: left;
        margin-bottom: 20px;
        .chat-name {
          width: 100%;
          @include ellipsis();
          font-size: 12px;
          font-weight: 400;
          color: #666666;
        }
        .chat-message {
          display: inline-block;
          max-width: 200px;
          @include word-break();
          background: rgba(247, 247, 247, 1);
          box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
          border: 1px solid #eeeeee;
          padding: 6px 10px 8px 10px;
          box-sizing: border-box;
          margin-top: 10px;
          font-size: 13px;
          color: rgba(51, 51, 51, 1);
          line-height: 23px;
          border-radius: 4px;
          min-width: 27px;
          min-height: 39px;
          img {
            width: 24px;
          }
        }
        .chat-message:after {
          content: '';
          position: absolute;
          display: inline-block;
          width: 7px;
          height: 10px;
          top: 34px;
          left: -6px;
          background-image: url(~@views/live/cc/assets/images/live-icons2.png);
          background-repeat: no-repeat;
          background-position: -25px -120px;
        }
        .teacher {
          color: rgba(3, 153, 11, 1);
        }
        .self {
          color: #e67410;
        }
      }
      .chat-content-right {
        .chat-name {
          text-align: right;
        }
        .chat-name-wrap {
          float: right;
          .chat-name-from {
            float: right;
          }
          .chat-name-to {
            float: right;
          }
          clear: both;
        }
        .chat-message {
          float: right;
          background: #ffaa5f;
          border: 1px solid #ff902e;
        }
        .chat-message:after {
          content: '';
          position: absolute;
          display: inline-block;
          width: 7px;
          height: 10px;
          top: 34px;
          left: 229px;
          background-image: url(~@views/live/cc/assets/images/live-icons2.png);
          background-repeat: no-repeat;
          background-position: -35px -135px;
        }
      }
    }
  }
}
